<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@taglib prefix="my" tagdir="/WEB-INF/tags/" %>
<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"></c:set>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap.css" />
<script type="text/javascript" src="${contextPath}/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="${contextPath}/css/common.css"/>
<link rel="stylesheet" href="${contextPath}/css/menu.css" />
<script type="text/javascript"> 
function total()
{ 	
	var table = eval(document.getElementById("mytable"));

	var price;
	var num; 
	var sum = 0;
	var account = 0;
	
	for(var i = 1; i < table.rows.length - 2; i++)
	{

		if(table.rows[i].cells[0].firstChild.checked == false)
		{
			continue;
		}
		price = parseFloat(table.rows[i].cells[2].innerHTML);
		
		var td = table.rows[i].cells[3];
		var objs = td.getElementsByTagName("input");
		num = parseInt(objs[1].value);
		if(num < 1 || isNaN(num) || typeof(num) == "undefined") 
		{
			num = 1;
			objs[1].value = num;
		}
		sum = Number(sum) + Number(num);		
		account = Number(account) + price * num;
	}
	
	document.getElementById("total_num").innerHTML=sum;
	document.getElementById("total_price").innerHTML="￥"+account;
	balan.value=account;
	return;
}

function value_change(i,isbn)
{
	var a = i;
	var id = isbn;
	var obj = eval(document.getElementById(id));
	var val = obj.value;
	if(a == '0') val = val - 1; 
	else val = Number(val) + Number(1);
	if(val>9999 ) {  val=9999; }
	if(val<1  ) {  val=1; }   
	obj.value=val; 
	total();
	return;
}

function deleteBook()
{
	del.submit();
	return;
}
function balance()
{
	balanc.submit();
	return;
}
function selectAll(f)
{
	var objs = document.getElementsByName("check");
	var flag = f;
	for(var i = 0; i < objs.length; i++)
	{
		objs[i].checked=flag;
	}
	if(flag)
	{
		var select = document.getElementById("select");
		select.outerHTML="<a  id='select' href='#' onclick='selectAll(false)'>全不选</a>";
	}
	else
	{
		var select = document.getElementById("select");
		select.outerHTML="<a onclick=" + "selectAll('true')" + " id='select' href='#'>全选</a>";
	}
	total();
}
</script>

<div class="row">
	<div class="col-md-12">
		<form id="del" action="./deletebook.do" method="post">
			<table id="mytable" class="table table-hover">
				<tr>
					<td>删除</td>
					<td>商品</td>
					<td>单价</td>
					<td>数量</td>
					<td>操作</td>
				</tr>

				<c:forEach var="item" items="${cart}">
					<tr>
						<td><input type="checkbox" onchange="total()" name="check"
							value="${item.isbn}" /></td>
						<td><a href="../show.do?isbn=${item.isbn}"><img
								src="${contextPath}/img/${item.imageFile}" width="100px" />${item.title}</a></td>
						<td>${item.price}</td>
						<td>
							<input type="button" onclick="value_change('0','${item.isbn}')" value="-">
							<input	type="text" id="${item.isbn}" value="${item.num}" onchange="total()" style="width: 30px" /> 
							<input type="button" onclick="value_change('1','${item.isbn}')" value="+"></td>
						<td><a href="./deletebook.do?isbn=${item.isbn}">删除</a></td>
					</tr>
				</c:forEach>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<th colspan="2">共<span id="total_num"></span>件商品，总计<span
						id="total_price"></span>
					</th>
				</tr>
				<tr>
					<td><a onclick="selectAll('true')" id="select" href="#">全选</a></td>
					<td><a onclick="deleteBook()" href="#">删除所选项</a></td>
					<td><a href="../list.htm">继续购物</a></td>
					<td><a href="./clearcart.do">清空购物车</a></td>
					<td><a href="#" onclick="balance()">结算</a></td>
				</tr>
			</table>
		</form>
		<form id="balanc" action="../balance.do" method="get">
  			 <input type="hidden" id="balan" name="balan" value="">
		</form>
	</div>
</div>

